<template>
  <el-upload
    ref="upload"
    class="my-upload"
    drag
    :action="upFileUrl"
    :data="dataParam"
    :on-preview="filePreview"
    :on-remove="fileRemove"
    :file-list="fileList"
    :auto-upload="false"
    list-type="picture-card"
    :limit="10"
    multiple
    :on-exceed="exceedFiles"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text" style="line-height:0px;">
      将文件拖到此处，或<em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        只能上传图片格式文件
      </div>
    </template>
    <el-dialog :model-value="dialogVisible" width="60%" :before-close="dialogBeforeClose">
      <div :transform="true" style="width:100%;height:400px;">
        <el-image :src="dialogImageUrl" style="width: auto; height: 100%;" :append-to-body="true">
          <template #placeholder>
            <div class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </template>
        </el-image>
      </div>
    </el-dialog>
  </el-upload>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { WebApi } from '@/assets/model/httpconfig/WebApi';
@Options({
  props: {
    filePath: String,
    limit: Number
  },
  emits: ['changeResult']
})
export default class UpImage extends Vue {
  private upFileUrl = WebApi.fileServePath + '/upfile/upfiles';
  private dialogVisible = false;
  private dialogImageUrl = '';
  private dataParam = {
    filePath: 'demo'
  };
  fileList: any = [];
  /**控制是提交还是更新 */
  mounted() {}
  created() {}
  /**移除上传成功的文件调用函数 */
  fileRemove(file: any, fileList: any) {
    console.log(file, fileList);
  }
  /**点击文件列表中已上传的文件时的钩子 */
  filePreview(file: any) {
    console.log(file);
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  }
  exceedFiles(files: any, fileList: any) {
    let _this: any = this;
    _this.$message({
      message: '警告，只能上传一个文件！',
      type: 'warning'
    });
  }
  submitUpload() {
    let upload: any = this.$refs.upload;
    upload.abort();
  }
  public dialogBeforeClose() {
    this.dialogVisible = false;
  }
}
</script>

<style lang="scss">
</style>
